<template>
  <!-- 运营商号码管理 -->
  <el-dialog title="运营商短信号码" :visible.sync="dialogVisible" :close-on-click-modal="false" width="800px" append-to-body>
    <div class="">
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="auto">
        <!-- <el-form-item label="手机号" prop="tel">
        <el-input v-model="queryParams.tel" placeholder="请输入手机号" clearable size="small" />
      </el-form-item>
      <el-form-item label="卡位编号" prop="num">
        <el-input v-model="queryParams.num" placeholder="请输入编号" clearable size="small" />
      </el-form-item> -->
        <el-form-item class="btns">
          <!-- <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="resetQuery">重置</el-button> -->
          <el-button type="success" icon="el-icon-plus" @click="openAdd">新增</el-button>
        </el-form-item>
      </el-form>
      <div class="table_box">
        <el-table border :data="tableData.records" style="width: 100%" stripe>
          <el-table-column prop="" label="运营商">
            <template>
              <span>{{name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="短信号码"></el-table-column>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="edit" @click="editRow(scope.row)">编辑</el-button>
              <el-button type="del" @click="delRow(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>

      <el-dialog title="号码新增/编辑" :visible.sync="dialogVisible2" :close-on-click-modal="false" width="800px" append-to-body>
        <div class="form-box">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="运营商" prop="name">
              <span>{{name}}</span>
            </el-form-item>
            <el-form-item label="短信号码" prop="number">
              <el-input v-model="form.number" placeholder="请输入运营商短信号码" />
            </el-form-item>
            <el-row>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" :rows="4" style="width:600px" />
              </el-form-item>
            </el-row>

            <div class="center">
              <el-button @click="close()">取消</el-button>
              <el-button type="primary" @click="submitForm('form')" v-loading="loading">提交</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </el-dialog>

</template>

<script>
import gameListApi from "@/api/gameConfig/gameList";
export default {
  name: "",
  components: {},
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,

      tableData: {
        records: [],
        total: 0,
      },
      loading: false,
      queryParams: {
        gameCarrierId: "",
      },
      // 表单参数
      form: {
        name: "",
        remark: "",
        number: "",
        gameCarrierId: "",
      },
      name: "",
      isEdit: false,
      rules: {
        number: [
          { required: true, message: "请输入运营商号码", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  activated() {},
  methods: {
    open(row) {
      this.queryParams.gameCarrierId = row.id;
      this.gameCarrierId = row.id;
      this.name = row.name;
      this.getList();
      this.dialogVisible = true;
    },
    // 获取列表
    getList() {
      this.loading = true;
      gameListApi
        .getGameCarrierNumberList(this.queryParams)
        .then((response) => {
          this.tableData.records = response.rows;
          this.tableData.total = response.total;
          this.loading = false;
          if (response.rows && response.rows.length) {
            this.rise = response.rows[0].rise;
          }
        });
    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },

    // 打开新增弹窗
    openAdd() {
      this.isEdit = false;
      this.dialogVisible2 = true;
      this.form = {
        remark: "",
        number: "",
        gameCarrierId: this.gameCarrierId,
      };
    },
    // 打开编辑弹窗
    editRow(row) {
      this.title2 = "编辑号码";
      this.isEdit = true;
      this.dialogVisible2 = true;
      this.handleUpdate(JSON.parse(JSON.stringify(row)));
    },
    // 删除
    delRow(row){
      this.$modal
          .confirm(
            "是否确认删除" + row.number + '"？'
          )
          .then(() => {
            gameListApi.delGameCarrierNumber(row.id).then(res => {
              this.$modal.msgSuccess(res.msg);
              this.getList()
            })
          })
    },

    // 重置
    reset() {
      this.$refs.form.resetFields();
    },
    /** 查询详情进行回显 */
    handleUpdate(row) {
      this.form = row;
    },
    submitForm(formName) {
      this.$refs["" + formName].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            // 编辑
            gameListApi.editGameCarrierNumber(this.form).then((res) => {
              this.$message.success(res.msg);
              this.reset();
              this.dialogVisible2 = false;
              this.getList();
            });
          } else {
            // 新增
            //console.log(this.form);
            gameListApi.addGameCarrierNumber(this.form).then((res) => {
              this.$message.success(res.msg);
              this.reset();
              this.dialogVisible2 = false;
              this.getList();
            });
          }
        } else {
          this.$alert("请填写完整！");
        }
      });
    },
    close() {
      this.reset();
      this.dialogVisible2 = false;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>